<template>
  <!-- 商品详情-数据概览8/131 -->
  <div id="dataOverview">
    <template v-if="vipRootObj[8][131].owner">
      <template v-if="!once">
        <div class="top">
          <radio_group01
            :radio_values="['近7天', '30天', '90天']"
            v-model="KindName"
            class="tab01"
          />
          <div class="optionsBox">
            <el-date-picker
              class="long_time"
              v-model="liveTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              prefix-icon="el-icon-arrow-down"
              unlink-panels
              :clearable="false"
              :picker-options="pickeroptions"
              value-format="yyyy-MM-dd"
              @change="onPick1"
            ></el-date-picker>
          </div>
        </div>
        <div class="overview">
          <div class="title">商品概览</div>
          <ul v-if="!infoLoading">
            <!-- <li></li> -->
            <li v-if="infodata">
              <p v-if="infodata.liveVolume || infodata.awemeVolume">
                {{ format_num(infodata.liveVolume + infodata.awemeVolume) }}
              </p>
              <p v-if="infodata.liveVolume == 0 && infodata.awemeVolume == 0">
                {{ format_num(infodata.liveVolume + infodata.awemeVolume) }}
              </p>
              <div class="aaa">
                <span>总销量</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="总销量包含直播销量, 视频销量及橱窗销量"
                  placement="top-start"
                >
                  <img src="@/assets/meng/search_result04.png" alt />
                </el-tooltip>
              </div>
            </li>
            <li>
              <p>{{ format_num(infodata.liveVolume) }}</p>
              <p>直播销量</p>
            </li>
            <li>
              <p>{{ format_num(infodata.awemeVolume) }}</p>
              <p>视频销量</p>
            </li>
            <li>
              <p>{{ format_num(infodata.associatedlive) }}</p>
              <p>关联直播</p>
            </li>
            <li>
              <p>{{ format_num(infodata.associatedVideo) }}</p>
              <p>关联视频</p>
            </li>
            <li>
              <p>{{ format_num(infodata.associatedAuthor) }}</p>
              <p>关联达人</p>
            </li>
          </ul>
          <div
            v-loading="infoLoading"
            v-if="infoLoading"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
        </div>
        <div class="trend">
          <div>
            <div class="trendtit">商品趋势</div>
            <p>注意：指标最少选1个，最多选2个</p>
          </div>
          <div>
            <div class="check mar_top mar_bot">
              <span>交易指标</span>
              <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
                <el-checkbox v-for="city in cities" :label="city" :key="city">{{
                  city
                }}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="check mar_bot">
              <span>评价指数</span>
              <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
                <el-checkbox
                  v-for="city in cities1"
                  :label="city"
                  :key="city"
                  >{{ city }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
            <div class="check">
              <span>关联指标</span>
              <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
                <el-checkbox
                  v-for="city in cities2"
                  :label="city"
                  :key="city"
                  >{{ city }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div class="chart">
          <linerChart
            :xData="data_x"
            :series1="data_Y1"
            :series2="data_Y2"
            :name1="name"
            :name2="name1"
            :nasns="nasns"
            :nasns1="nasns1"
          ></linerChart>
        </div>
        <table class="table">
          <thead>
            <tr>
              <th>日期</th>
              <th>总销量</th>
              <th>总销售额</th>
              <th>好评率</th>
              <th>关联视频数</th>
              <th>关联直播数</th>
              <th>热推达人数</th>
            </tr>
          </thead>
          <tbody>
            <tr class="section_total" v-if="list.sumData">
              <td>区间总计</td>
              <td v-if="list.sumData">{{ format_num(list.sumData.volume) }}</td>
              <td>{{ format_num(list.sumData.amount) }}</td>
              <td>{{ list.sumData.goodRate }}%</td>
              <td>{{ format_num(list.sumData.associatedVideo) }}</td>
              <td>{{ format_num(list.sumData.associatedlive) }}</td>
              <td>{{ format_num(list.sumData.associatedAuthor) }}</td>
            </tr>
            <tr class="each" v-for="(item, i) in showroomList" :key="i + 'i'">
              <td v-if="item.timeUnix">
                {{ timestamp(item.timeUnix, "Y-M-D") }}
              </td>
              <td>{{ format_num(item.volume) }}</td>
              <td>{{ format_num(item.amount) }}</td>
              <td>{{ formatRate(item.goodRate / 100, 1) }}</td>
              <td>{{ format_num(item.associatedVideo) }}</td>
              <td>{{ format_num(item.associatedlive) }}</td>
              <td>{{ format_num(item.associatedAuthor) }}</td>
            </tr>
          </tbody>
        </table>
        <!-- <p
        class="nothing"
        v-if="showroomList.length && !listLoading && page * size >= total"
      >
        我是有底线的～
        </p>-->
        <div class="zwbox" v-if="showroomList.length == 0 && !listLoading">
          <div class="zw">
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
        </div>

        <div class="pageBox" v-if="total > size && !listLoading">
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="total"
            :page-size="size"
            :current-page="page"
            @current-change="get_data"
            :hide-on-single-page="true"
          ></el-pagination>
        </div>
      </template>
      <div
        v-if="list.length == 0 && listLoading && !once"
        style="margin-top: 30px; margin-bottom: 100px"
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      ></div>
      <div
        v-if="once"
        style="margin-top: 30px; margin-bottom: 100px"
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      ></div>
    </template>
    <div class="dialogEg" v-else>
      <img
        :src="$global.staticUrl + 'image/egImg/goodsJurisdiction01.png'"
        alt
      />
      <payVip
        routerName="compare"
        :lowestVipNum="vipRootObj[8][131].ownerMinLevel"
      />
    </div>
  </div>
</template>

<script>
import linerChart from "./lineChart.vue";
export default {
  props: ["id"],
  data() {
    const cityOptions = ["总销量", "销售额"];
    const cityOptions1 = ["评价数", "好评数", "差评数", "好评率", "差评率"];
    const cityOptions2 = ["关联视频数", "关联直播数", "关联达人数", "推广次数"];
    return {
      nasns: false,
      nasns1: false,
      once: true,
      data_x: null,
      data_Y1: null,
      data_Y2: null,
      typeids: [11],
      name: null,
      name1: null,
      size: 13,
      listLoading: false,
      infodata: [],
      showroomList: [],
      page: 1,
      total: null,
      list: [],
      checkedCities: ["总销量"],
      cities: cityOptions,
      cities1: cityOptions1,
      cities2: cityOptions2,
      KindName: "30天",
      liveTime: [],
      startDate: "",
      endDate: "",
      keyWords: "",
      orderBy: 1, //1降序 0升序
      sort: 1,
      // 选择时间 不可选的日期.
      pickeroptions: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 180 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          ); // 返回 所有时间 大于 当前时间
        },
      },
      vipRootObj: this.$store.state.userRoot, //会员权限对象
      infoLoading: false,
    };
  },
  components: { linerChart },
  computed: {},
  created() {
    this.name = "总销量";
    if (this.vipRootObj[8][131].owner) {
      this.getTime();
    }

    // this.douyinprolist()
  },
  mounted() {},
  watch: {
    checkedCities(n) {
      this.data_Y2 = [];
      this.data_Y1 = [];
      // this.this.data_x = [];
      this.name = null;
      this.name1 = null;
      this.name = n[0];
      this.name1 = n[1];
      if (this.name1 == "好评率") {
        this.nasns = true;
      } else if (this.name1 == "差评率") {
        this.nasns = true;
      } else {
        this.nasns = false;
      }
      if (this.name == "好评率") {
        this.nasns1 = true;
      } else if (this.name == "差评率") {
        this.nasns1 = true;
      } else {
        this.nasns1 = false;
      }

      this.typeids = [];
      n.map((item) => {
        if (item == "总销量") {
          this.typeids.push("11");
        } else if (item == "销售额") {
          this.typeids.push("12");
        } else if (item == "评价数") {
          this.typeids.push("2");
        } else if (item == "好评数") {
          this.typeids.push("3");
        } else if (item == "差评数") {
          this.typeids.push("4");
        } else if (item == "好评率") {
          this.typeids.push("5");
        } else if (item == "差评率") {
          this.typeids.push("6");
        } else if (item == "关联视频数") {
          this.typeids.push("7");
        } else if (item == "关联直播数") {
          this.typeids.push("8");
        } else if (item == "关联达人数") {
          this.typeids.push("9");
        } else if (item == "推广次数") {
          this.typeids.push("10");
        }
      });
      // this.name
      this.getTrendtype();
    },
    KindName: function (newVal, oldVal) {
      this.infodata = [];
      if (this.KindName != "") {
        this.KindName = newVal;
        this.getTime();
      }
    },
    // keywords: function (newVal, oldVal) {
    //   if (newVal == "") {
    //     this.getTime();
    //   }
    // }
  },
  methods: {
    // 分页
    get_data(n) {
      this.showroomList = [];
      this.roomLoading = true;
      this.page = n;
      this.showroomList = this.list.list.slice(
        this.size * (n - 1),
        this.size * n
      );
      // this.$nextTick(() => {
      //   setTimeout(() => {
      //     this.roomLoading = false;
      //   }, 500);
      // });
    },

    onPick1() {
      this.KindName = "";
      // this.vidio = [];
      // this.page = 1;
      this.list = [];
      this.showroomList = [];
      this.getTime();
    },
    getTime() {
      this.listLoading = true;
      switch (this.KindName) {
        case "近7天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 6,
            "Y-M-D"
          );
          break;

        case "30天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 29,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 89,
            "Y-M-D"
          );
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [this.startDate, this.endDate];
      // 商品列表
      this.$axios({
        method: "get",
        url: "/api/product/douyinprolistnew",
        params: {
          // proId: "3487748950235198351",
          proId: this.id,
          startDate: this.startDate,
          endDate: this.endDate,
        },
      })
        .then((response) => {
          this.listLoading = false;
          if (response.data.code == 0) {
            this.once = false;
            this.list = response.data.data;
            this.showroomList = this.list.list.slice(0, this.size);
            this.total = this.list.list.length;
          } else if (response.data.code == 1003) {
            this.once = false;
          }
        })
        .catch((error) => {
          console.log(error);
        });
      this.getInfoData();
      this.getTrendtype();
    },
    getTrendtype(){
      this.$axios({
        method: "get",
        url: "/api/product/trendtype",
        params: {
          // proId: "3487748950235198351",
          proId: this.id,
          startDate: this.startDate,
          endDate: this.endDate,
          typeids: this.typeids.toString(),
        },
      }).then((res) => {
        if (res.data.data[0]) {
          this.data_x = res.data.data[0].trendlist[0].map((ele) => {
            return this.timestamp(ele, "M-D");
          });
          if (res.data.data[0]) {
            this.data_Y1 = res.data.data[0].trendlist[1];
          }
          if (res.data.data[1]) {
            this.data_Y2 = res.data.data[1].trendlist[1];
          }
        }
      });
    },
    getInfoData(){
      this.infoLoading = true;
      this.$axios({
        method: "get",
        url: "/api/product/infodata",
        params: {
          // proId: "3487748950235198351",
          proId: this.id,
          startDate: this.startDate,
          endDate: this.endDate,
        },
      }).then((res) => {
        this.infoLoading = false;
        if (res.data.code == 0) {
          this.infodata = res.data.data;
          // console.log(this.infodata);
        }
      });
    }
  },
};
</script>

<style lang="less" scoped>
#dataOverview {
  // padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  box-sizing: border-box;
  .top {
    margin-bottom: 10px;
    // width: 100%;
    display: flex;
    justify-content: flex-end;
    .optionsBox {
      margin-left: 10px;
    }
  }
  .overview {
    .title {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0px;
      color: #222222;
      position: relative;
      text-indent: 9px;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: #fd7f2c;
        border-radius: 2px;
      }
    }
    > ul {
      padding-top: 30px;
      width: 100%;
      margin: auto;
      box-sizing: border-box;
      display: flex;
      // padding-left: 120px;
      li {
        width: 14%;
        height: 46px;
        &:nth-child(1) {
          margin-left: 11%;
        }
        &:nth-child(2) {
          border-right: 1px solid #efefef;
        }
        &:nth-child(3) {
          border-right: 1px solid #efefef;
        }
        &:nth-child(6) {
          border-right: 1px solid #efefef;
        }
        > p {
          &:nth-child(1) {
            height: 31px;
            text-align: center;
            font-size: 24px;
            font-family: DINAlternate-Bold;
            letter-spacing: 0px;
            color: #222222;
          }
          &:nth-child(2) {
            font-size: 12px;
            letter-spacing: 0px;
            color: #888888;
            text-align: center;
          }
        }
        > div {
          display: flex;
          font-size: 12px;
          letter-spacing: 0px;
          color: #888888;
          justify-content: center;
          align-items: center;
          > img {
            width: 14px;
            height: 14px;
            margin-left: 4px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .trend {
    > div {
      &:nth-child(1) {
        // display: flex;
        margin-top: 40px;
        > p {
          &:nth-child(2) {
            display: inline-block;
            margin-left: 5px;
            font-size: 12px;
            letter-spacing: 0px;
            color: #888888;
            // line-height: 25px;
            vertical-align: bottom;
          }
        }
      }
    }

    .trendtit {
      display: inline-block;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0px;
      color: #222222;
      position: relative;
      text-indent: 9px;
      // height: 21px;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: #fd7f2c;
        border-radius: 2px;
      }
    }
    .mar_top {
      margin-top: 29px;
    }

    .mar_bot {
      margin-bottom: 20px;
    }
    .check {
      display: flex;
      > span {
        font-size: 14px;
        letter-spacing: 0px;
        color: #888888;
        margin-right: 25px;
      }
      .el-checkbox__label {
        font-size: 14px;
        color: #555555;
      }
    }
  }
  .chart {
    width: 100%;
    height: 300px;
  }
  .table {
    margin-top: 20px;
    width: 100%;
    // min-height: 200px;
    position: relative;
    .section_total {
      background-color: #fff7f2;
      > td {
        text-align: center;
        font-family: DINAlternate-Bold;
        letter-spacing: 0px;
        color: #fd7f2c;
        font-size: 15px;
        line-height: 45px;
      }
    }
    .each {
      text-align: center;
      > td {
        font-family: DINAlternate-Bold;
        font-size: 15px;
        line-height: 48px;
        letter-spacing: 0px;
        color: #222222;
      }
    }
  }
  .zwbox {
    position: relative;
    height: 500px;
  }
}
@media screen and (max-width: 1400px) {
  #dataOverview ul {
    flex-wrap: wrap;
    padding-top: 18px !important;
  }

  #dataOverview ul li {
    width: 19.9% !important;
    margin-top: 12px;
    &:nth-child(1) {
      margin-left: 0 !important;
    }
    // &:nth-child(5) {
    //   // margin-left: 19.9%;
    // }
  }
}
</style>
